<template>
	<div class="destination_div">
		<div class="destination_content" style="overflow: hidden;">
			<div class="fl country_div" ref="menuWrapper">
				<ul>
				    <li class="country_li country_cur">中国</li>
				    <li class="country_li">中国</li>
				    <li class="country_li">中国</li>
				    <li class="country_li">中国</li>
				    <li class="country_li">中国</li>
				    <li class="country_li">中国</li>
				    <li class="country_li">中国</li>
				    <li class="country_li">中国</li>
				    <li class="country_li">中国</li>
				    <li class="country_li">中国</li>
				    <li class="country_li">中国</li>
				    <li class="country_li">中国</li>
				    <li class="country_li">中国</li>
				    <li class="country_li">中国</li>
				    <li class="country_li">中国</li>
				    <li class="country_li">中国</li>
				    <li class="country_li">中国</li>
				    <li class="country_li">中国</li>
				</ul>
			</div>
			<div class="tuijian_div">
					<p>新品推荐</p>
					<p>本季优选</p>
				</div>
			<div class="fl country_Info" ref="foodsWrapper" style="position:absolute; top: 0; bottom: 0;overflow: hidden;">
				<!-- <div class="tuijian_info" > -->
					<ul class="tuijian_info" style="overflow: hidden;">
					    <li class="hot_li" >
							<img src="../../assets/img/hot1.png" style="width: 100%;height: 100%;">
						</li>
					     <li class="hot_li" >
							<img src="../../assets/img/hot1.png" style="width: 100%;height: 100%;">
						</li>
						 <li class="hot_li" >
							<img src="../../assets/img/hot1.png" style="width: 100%;height: 100%;">
						</li>
						 <li class="hot_li" >
							<img src="../../assets/img/hot1.png" style="width: 100%;height: 100%;">
						</li>
						<li class="hot_li" >
							<img src="../../assets/img/hot1.png" style="width: 100%;height: 100%;">
						</li>
					     <li class="hot_li" >
							<img src="../../assets/img/hot1.png" style="width: 100%;height: 100%;">
						</li>
						 <li class="hot_li" >
							<img src="../../assets/img/hot1.png" style="width: 100%;height: 100%;">
						</li>
						 <li class="hot_li" >
							<img src="../../assets/img/hot1.png" style="width: 100%;height: 100%;">
						</li>
						<li class="hot_li" >
							<img src="../../assets/img/hot1.png" style="width: 100%;height: 100%;">
						</li>
					     <li class="hot_li" >
							<img src="../../assets/img/hot1.png" style="width: 100%;height: 100%;">
						</li>
						 <li class="hot_li" >
							<img src="../../assets/img/hot1.png" style="width: 100%;height: 100%;">
						</li>
						 <li class="hot_li" >
							<img src="../../assets/img/hot1.png" style="width: 100%;height: 100%;">
						</li>
						<li class="hot_li" >
							<img src="../../assets/img/hot1.png" style="width: 100%;height: 100%;">
						</li>
						 <li class="hot_li" >
							<img src="../../assets/img/hot1.png" style="width: 100%;height: 100%;">
						</li>
						 <li class="hot_li" >
							<img src="../../assets/img/hot1.png" style="width: 100%;height: 100%;">
						</li>
					</ul>
				<!-- </div> -->
			</div>
		</div>
		<footer-com></footer-com>
	</div>
</template>
<script>
	import footer from '../footer/footer.vue'
	import BScroll from 'better-scroll'
	export default{
		name: 'destination',
		data(){
			return {
				listHeight: [],
				foodsScrollY: 0,
			}
		},
		beforeRouteEnter:function(to,from,next){
				if(to.path == '/destination'){// 判断上一页路由来源， 如果为首页，设置当前要请求首页的接口， 如果为监控，...
					next(function(vm){
						//console.log(vm)
						vm.$store.state.routerIndex = false;
						vm.$store.state.routerDis = true;
						vm.$store.state.routerOrder = false;
						vm.$store.state.routerMine = false;
						
					});
					//vm.$store.state._dispatchType = 'index';
					//vm.dispatchType = 'index';
				}
		},
		components:{
            "footer-com": footer,
        },
        computed:{
        	menuCurrentIndex() {
		      for (var i = 0, l = this.listHeight.length; i < l; i++) {
		        var topHeight = this.listHeight[i]
		        var bottomHeight = this.listHeight[i + 1]
		        if (!bottomHeight || (this.foodsScrollY >= topHeight && this.foodsScrollY < bottomHeight)) {
		          return i
		        }
		      }
		      return 0
		    },
        },
        created(){
        	this.$nextTick(function(){
		        this._initScroll(); // 初始化scroll
		        this._calculateHeight(); // 初始化列表高度列表
		    })
        },
        methods:{
        	 _initScroll() {
			      this.menuWrapper = new BScroll(this.$refs.menuWrapper, {
			        click: true
			      });
			      this.foodsScroll = new BScroll(this.$refs.foodsWrapper, {
			        click: true,
			        //probeType: 3
			      });
			      // // 监控滚动事件
			      this.foodsScroll.on('scroll', function(pos){
			        this.foodsScrollY = Math.abs(Math.round(pos.y))
			      })
		    },
		    _calculateHeight() {
				var foodList = this.$refs.foodsWrapper.querySelectorAll('.hot_li');
				console.log(foodList)
				var height = 0;
				this.listHeight.push(height)
				for (var i = 0, l = foodList.length; i < l; i++) {
					var item = foodList[i]
					height += item.clientHeight
					this.listHeight.push(height)
				}
    		},
        }
	}
</script>
<style rel="stylesheet" lang="scss" scoped>
	@import "../../assets/css/main.scss";
	.destination_div{
		padding-bottom: 1.3333rem;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
		.destination_content{
			padding-left: 2.9333rem;
			overflow: hidden;
			height: 100%;
			// overflow: hidden;
		 //    display: flex;
		 //    position: absolute;
		 //    width: 100%;
			.country_div{
				/* flex: 0 0 2.9333rem; */
				width: 2.9333rem;
				position: absolute;
				left: 0;
				height: 100%;
				overflow: hidden;
				z-index: 2;

				.country_cur{
					background-color: #FFF !important;
				}
				.country_li{
					background-color: #DDD;
					width: 2.9333rem;
					height: 1.4667rem;
					line-height: 1.4667rem;
					text-align: center;
				}
			}
			.tuijian_div{
				overflow: hidden;
				position: fixed;
				z-index: 1;
				width: 100%;
				background: #FFF;
				padding-left: 110px;
				box-sizing: border-box;
				right: 0;
				p{
					height: 1.4667rem;
					line-height: 1.4667rem;
					text-align:center;
					float: left;
					width: 50%;
				}
			}
			.country_Info{
				// position: absolute;
				// height: 100%;
				// overflow: scroll;
				flex: 1;
				.tuijian_info{
					padding: 1.4667rem 0.4rem;
				}
			}
		}
		.hot_li{
			width: 2.9333rem;
			margin-left:0;
		}
		.hot_li:nth-child(2n+1){
			margin-right: 2%;
		}
		.hot_li:nth-child(2n){
			margin-left: 2%;
		}
		.hot_li:nth-child(n+3){
			margin-top: 4%;
		}

	}
</style>